<template>
  <view class="containner">
    <u-navbar
      height="50"
      title="发布项目信息"
      title-size="36"
      back-icon-color="#333"
      title-color="#333"
    ></u-navbar>
    <view class="from">
      <u-cell-group>
        <u-cell-item title="项目名称" :arrow="false">
          <view style="display: flex; justify-content: flex-end">
            <view style="width: 50%" class="text_right">
              <input
                v-model="form.name"
                placeholder="请输入项目名称"
                :clearable="false"
                :inputBorder="false"
              />
            </view>
          </view>
        </u-cell-item>
        <!-- <u-cell-item @click="onSelect('selector')" title="项目类型" :value=" typeEleven ? typeEleven.name : '请选择'"></u-cell-item> -->
        <u-cell-item
          @click="onSelect('region')"
          title="项目地址"
          :value="
            address ? address.province.label + address.city.label + address.area.label : '请选择'
          "
        ></u-cell-item>
        <!-- <u-cell-item  title="详细地址" :arrow="false">
			<view style="display: flex;justify-content: flex-end">
			  <view style="width: 50%" class="text_right">
				<input  v-model="form.detailAddress" placeholder="请输入项目简述"  :clearable="false" :inputBorder="false"/>
			  </view>
			</view>
		  </u-cell-item> -->
        <!--  <u-cell-item  title="入场时间" >
			  <view class="">
				<text style="margin-right: 20rpx;" @click="checkTime(1)">{{startTime ? startTime : '开始时间' }}</text>
				<text style="margin-right: 20rpx;">至</text> <text  @click="checkTime(2)">{{endTime ? endTime : '结束时间' }}</text>
			  </view>
		  </u-cell-item> -->
      </u-cell-group>

      <u-cell-group>
        <u-cell-item title="项目简述" :arrow="false">
          <view style="display: flex; justify-content: flex-end">
            <view style="width: 50%" class="text_right">
              <input
                v-model="form.introduction"
                placeholder="请输入项目简述"
                :clearable="false"
                :inputBorder="false"
              />
            </view>
          </view>
        </u-cell-item>

        <u-cell-item title="项目要求" :arrow="false">
          <view style="display: flex; justify-content: flex-end">
            <view style="width: 50%" class="text_right">
              <input
                v-model="form.requireCondition"
                placeholder="请输入项目要求"
                :clearable="false"
                :inputBorder="false"
              />
            </view>
          </view>
        </u-cell-item>
      </u-cell-group>

      <view class="info-view">
        <view style=""> 项目现场 </view>
        <u-upload ref="uUpload" :action="uploadURL"></u-upload>
      </view>
      <u-cell-group>
        <u-cell-item title="项目报价">
          <view style="display: flex; justify-content: flex-end">
            <view style="width: 50%" class="text_right">
              <input
                v-model="budgetPrice"
                placeholder="请输入项目报价"
                :clearable="false"
                :inputBorder="false"
              />
            </view>
          </view>
        </u-cell-item>

        <!-- <u-cell-item  :arrow="false">
			  <view slot="title" style="display: flex;align-items: center;" @click="showPopup = !showPopup">
			    <text >保证金</text>

				<u-icon name="../../static/img/gzsm.png" style="margin-left: 8rpx;" size="40rpx"></u-icon>
				</view>
		  			<view style="display: flex;justify-content: flex-end">
		  			  <view style="width: 50%" class="text_right">
		  				<input  v-model="form.amount" placeholder="请输入项目简述"  :clearable="false" :inputBorder="false"/>
		  			  </view>
		  			</view>
		  </u-cell-item> -->
      </u-cell-group>

      <u-cell-group>
        <u-cell-item title="报名时间">
          <view class="">
            <text style="margin-right: 20rpx" @click="checkTime(3)">{{
              joinStartTime ? joinStartTime : '开始时间'
            }}</text>
            <text style="margin-right: 20rpx">至</text>
            <text @click="checkTime(4)">{{ joinEndTime ? joinEndTime : '截至时间' }}</text>
          </view>
        </u-cell-item>
      </u-cell-group>

      <!-- <u-cell-group>
		    <u-cell-item  title="是否开启电话咨询" :arrow="false">
				<u-switch v-model="form.allowConsult"></u-switch>
		    </u-cell-item>
		  </u-cell-group>	 -->
    </view>

    <!-- <text>我已阅读并同意</text><text style="color:red">《需求发布协议》</text> -->

    <view class="submit_the_module">
      <view @click="submit">确认提交</view>
    </view>
    <!-- <u-popup v-model="showPopup" width="650" border-radius="20" height="650" mode="center">
		<view class="popup-box">
			<h3 style="text-align: center;margin: 20rpx 0;">保证金规则</h3>
			<view class="">
				<p>一、具体规则</p>
				<view class="">
					相关描述相关描述相关描述，相关描述相关描述相关描述，相关描述相关描述相关描述，相关描述相关描述相关描述，相关描述相关描述相关描述，
				</view>
			</view>
		</view>
	</u-popup> -->

    <!-- 	<PayPopup :show="payShow" :payOrderId="payOrderId" :resStatus="resStatus">
		<view class="popup-top">
			保证金缴纳
		</view>
		<p style="font-size: 50rpx;font-weight: 600;	padding: 20rpx;	text-align: center;">
			¥{{realPay}}
		</p>
	</PayPopup> -->
    <u-picker
      @confirm="confirm"
      :range="ranges"
      :mode="selectMode"
      range-key="name"
      v-model="show"
    ></u-picker>
    <u-picker mode="time" @confirm="confirmTime" v-model="showTime" :params="params"></u-picker>
  </view>
</template>
<script>
import { BASE_URL, UP_URL } from '@/common/config.js'
import PayPopup from '@/components/PayPopup.vue'

export default {
  components: { PayPopup },
  data() {
    return {
      budgetPrice: '',
      payShow: false,
      payOrderId: '',
      realPay: '',
      resStatus: 3,
      accept: false,
      pickupPopup: false,
      checked: false,
      showPopup: false,
      selectMode: 'selector',
      timeStatus: '',
      address: '',
      show: false,
      showTime: false,
      rangesList: [],
      ranges: [],
      typeEleven: '',
      order_id: '',
      uploadURL: BASE_URL + UP_URL,
      startTime: '',
      endTime: '',
      joinStartTime: '',
      joinEndTime: '',
      //  form: {
      // name:"厨房防水补漏",
      // categoryId: 1,
      // areaId: '',
      // cityId: "",
      // detailAddress: "",
      // introduction: "补漏",
      // requireCondition: "施工人员业务能力强",
      // picUrls: [],
      // exceptStartTime: "",
      // exceptEndTime: "2222-01-01 00:00:00",
      // enrollStartTime: "",
      // enrollEndTime: "",
      // budgetPrice:'1000',
      // allowConsult: false
      //  },
      form: {
        name: '',
        categoryId: 1,
        areaId: '',
        cityId: '',
        detailAddress: '',
        introduction: '',
        requireCondition: '',
        picUrls: [],
        exceptStartTime: '2122-01-01 00:00:00',
        exceptEndTime: '2222-01-01 00:00:00',
        enrollStartTime: '',
        enrollEndTime: '',
        budgetPrice: '',
        allowConsult: true
      },
      params: {
        yeacountr: true,
        month: true,
        day: true,
        hour: false,
        minute: false,
        second: false
      }
    }
  },
  onLoad() {
    this.$u.get('/app-api/construction/project-category/simple-list').then((res) => {
      this.rangesList = res.data
    })
  },
  onShow() {},
  onReady() {},
  methods: {
    confirm(row) {
      if (this.selectMode == 'selector') {
        this.typeEleven = this.ranges[row]
        this.form.categoryId = this.ranges[row].id
      } else {
        this.address = row
        this.form.areaId = row.area.value
        this.form.cityId = row.city.value
        // this.typeEleven = this.ranges[row]
        // this.form.refund_type_id = this.ranges[row].id
      }
    },

    selectAFunction(value) {
      this.show = true
    },
    onSelect(s) {
      this.ranges = this.rangesList
      this.selectMode = s
      this.show = true
    },
    checkTime(e) {
      if (e < 3) {
        this.params = {
          year: true,
          month: true,
          day: true,
          hour: false,
          minute: false,
          second: false
        }
      } else {
        this.params = {
          year: true,
          month: true,
          day: true,
          hour: true,
          minute: true,
          second: false
        }
      }
      this.timeStatus = e
      this.showTime = true
    },
    confirmTime(e) {
      if (this.timeStatus == 1) {
        this.startTime = e.year + '-' + e.month + '-' + e.day
      } else if (this.timeStatus == 2) {
        this.endTime = e.year + '-' + e.month + '-' + e.day
      } else if (this.timeStatus == 3) {
        this.joinStartTime = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute
      } else if (this.timeStatus == 4) {
        this.joinEndTime = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute
      }
    },
    submit() {
      this.$refs.uUpload.lists.forEach((val) => {
        this.form.picUrls.push(val.response.data)
      })
      if (this.form.picUrls.length <= 0) {
        this.$u.toast('请上传项目现场图片')
        return
      }

      if (!this.form.name) {
        this.$u.toast('项目名称不能为空')
        return
      }
      // if(!this.form.areaId || !this.address){
      //  this.$u.toast(
      // "项目地址和详细地址不能为空"
      // )
      //  return
      // }

      // if(!this.form.introduction){
      //  this.$u.toast("项目描述不能为空")
      //  return
      // }

      // if(!this.form.introduction){
      //  this.$u.toast("项目需求不能为空")
      //  return
      // }

      if (!this.budgetPrice) {
        this.$u.toast('项目报价不能为空')
        return
      }

      this.form.budgetPrice = Number(this.budgetPrice) * 100
      // this.form.exceptStartTime = this.startTime + ' ' + '00:00:00'
      this.form.enrollStartTime = this.joinStartTime + ':00'
      this.form.enrollEndTime = this.joinEndTime + ':00'

      if (!this.form.enrollStartTime || !this.form.enrollEndTime) {
        this.$u.toast('报名开始和截止时间不能为空')
        return
      }

      // if(!this.form.exceptStartTime){
      //  this.$u.toast({
      // title: "项目入场时间不能为空"
      //  })
      //  return
      // }

      this.$u.post('/app-api/construction/project-info/create', this.form).then((res) => {
        // this.$u.post("/app-api/construction/deposit-order/publish-order", {projectId: res.data}).then(res=>{
        // 	this.payOrderId = res.data.id
        // 	this.realPay = res.data.price
        // 	this.payShow = true
        // })

        this.$u.toast('成功')
        setTimeout(() => {
          uni.navigateBack()
        }, 800)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.submit_the_module {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40rpx;
  view {
    width: 96%;
    border-radius: 40rpx;
    padding: 20rpx 0rpx;
    background-color: #01b858;
    color: #f1f1f1;
    font-size: 30rpx;
    text-align: center;
  }
}

.from {
  padding: 20rpx;
}

.info-view {
  background-color: #fff;
  font-size: 28rpx;
  color: #606266;
  padding: 28rpx;
}
.containner {
  background-color: #f6f8f9;
  min-height: 100vh;
}
.tips {
  background-color: #f1f6ff;
  padding: 10upx 20upx;
  font-size: 22upx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #4286f4;
  line-height: 32upx;
}
.agreement {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx;

  .agreement-text {
    display: flex;
    padding-left: 8rpx;
    color: $u-tips-color;
    text {
      color: #2d93fd;
    }
  }
}

.popup-box {
  padding: 20rpx;
}

.popup-box2 {
  padding: 20rpx;
  display: flex;
  flex-direction: column;
}

.popup-top {
  margin: 10rpx;
  text-align: center;
}

.popup-price {
  font-size: 50rpx;
  font-weight: 600;
  padding: 20rpx;
  text-align: center;
}

.pay-method {
  overflow: auto;
  padding: 25rpx 20rpx;
}
.pay-method-left {
  float: left;
  display: flex;
  align-items: center;
}

.pay-method-left image {
  width: 80rpx;
  height: 80rpx;
}

.pay-method-right {
  float: right;
}

.submit-pay {
  width: 700rpx;
  height: 75rpx;
  text-align: center;
  line-height: 75rpx;
  background-color: #0f76bc;
  border-radius: 65rpx;
  color: #ffffff;
  align-self: center;
  font-size: 35rpx;
  margin-top: 25rpx;
}
</style>
